﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Grid.master" AutoEventWireup="true" Inherits="Genesi.models" Codebehind="models.aspx.cs" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HtmlTitle" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ResultsPaneHeaderText" runat="Server">
    <script src="js/jquery.ui.combobox.js" type="text/javascript"></script>
    <style type="text/css">
	.ui-combobox {
		position: relative;
		display: inline-block;
	}
	.ui-button {
		position: absolute;
		top: 0;
		bottom: 0;
		margin-left: -1px;
		padding: 0;
		/* adjust styles for IE 6/7 */
		*height: 1.7em;
		*top: 0.1em;  
	}
	.ui-autocomplete-input {
		margin: 0;
		padding: 0.3em;
	}
	</style>
    <script type="text/javascript">
        function InitArticoli(idFornitore) {
            $('#selArticoli').children().remove();
            $.ajax({
                url: "/ServiceLayer/GenesiServices.svc/GetArticoli",
                type: "POST",
                data: JSON.stringify({ "idFornitore": idFornitore }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var data = $.parseJSON(result.d)

                    $('#selArticoli').append(
                        $('<option></option>').val("").html("")
                    );
                    $.each(data, function (index, item) {
                        $('#selArticoli').append(
                            $('<option></option>').val(item.id).html(item.CodArt + ' - ' + item.descrizione)
                        );
                    });

                    $('#selArticoli').combobox({
                        changed: function (event, ui) {
                            var articoloid = $(ui.item).val();
                        }
                    });
                },
                error: function (errmsg) {
                    ShowExcep(errmsg);
                }
            });

        }
        function InitFornitori() {
            console.log("forn");
            $.ajax({
                url: "/ServiceLayer/GenesiServices.svc/GetFornitori",
                type: "POST",
                dataType: "json",
                success: function (result) {
                    var data = $.parseJSON(result.d)

                    $('#selFornitori').append(
                        $('<option></option>').val("").html("")
                    );
                    $.each(data, function (index, item) {
                        $('#selFornitori').append(
                            $('<option></option>').val(item.id).html(item.CodForn + ' - ' + item.Fornitore)
                        );
                    });

                    $('#selFornitori').combobox({
                        changed: function (event, ui) {
                            var fornitoreid = $(ui.item).val();
                            InitArticoli(fornitoreid);
                        }
                    });
                },
                error: function (errmsg) {
                    ShowExcep(errmsg);
                }
            });
        }
        function Filtra(model) {
            model.ModelliDispo([]);
            $.ajax({
                url: "/ServiceLayer/GenesiServices.svc/GetArticoliFilters",
                type: "POST",
                data: JSON.stringify({ "idFornitore": model.selFornitore(), "idArticolo": model.selArticolo() }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var data = ko.mapping.fromJSON(result.d)();

                    $.each(data, function (index, item) {
                        item.CanAdd = ko.computed(function () {
                            return !Enumerable.From(model.Associati()).Any(function (x) { return x.id == item.id; });
                        }, item);
                    });

                    model.ModelliDispo(data); //binding al datasource

                },
                error: function (errmsg) {
                    ShowExcep(errmsg);
                }
            });




        }
        function Associa(model, item) {
            model.Associati.push({
                Id: ko.observable(item.id()),
                descrizione: ko.observable(item.descrizione()),
                CodArt: ko.observable(item.CodArt()),
                Iva: ko.observable(item.Iva()),
                PrezzoUnitario: ko.observable(item.PrezzoUnitario()),
                DescUnitaMisura: ko.observable(item.DescUnitaMisura())
            });
            item.CanAdd();
        }

        //costruttore del modello
        function ViewModel() {
            var self = this;
            self.selFornitore = ko.observable();
            self.selArticolo = ko.observable();
            self.ModelliDispo = ko.observableArray([]);
            self.Associati = ko.observableArray([]);

            self.Cerca = function () {
                Filtra(self);
            }

            self.Link = function (item) {
                Associa(self, item);
            }
            self.Remove = function (item) {
                self.Associati.remove(item);
            }
        }

        var model;
        $(function () {
            
        });

        function pageLoad() {
            // Initialization code here, meant to run once.
            model = new ViewModel();
            ko.applyBindings(model); //start motore knock

            $('#nuovo').hide();
            $('#showNew').click(function () {
                $('#nuovo').toggle('slow', function () {
                    // Animation complete.
                    if ($('#showNew').val() == "Nuovo") {
                        $('#showNew').val("Annulla");
                    }
                    else {
                        $('#showNew').val("Nuovo");
                    }
                });
            });

            InitFornitori();
            InitArticoli(""); 
        } 
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="FilterBar" runat="Server">
    <div style="float: left">
        Fornitore:
        <select id="selFornitori">
        </select>
    </div>
    <div style="text-align: center">
        Articoli:
        <select id="selArticoli">
        </select>
    </div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="GridView" runat="Server">
    <div style="float: right">
        <input type="button" id="showNew" class="ui-widget ui-state-default ui-corner-all ui-button-text-only"
            value="Nuovo" />
    </div>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PreviewPaneHeaderText" runat="Server">
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PreviewPane" runat="Server">
    <div id="nuovo">
        <div style="text-align: right">
            <input type="button" id="Button1" value="Filtra" class="ui-widget ui-state-default ui-corner-all ui-button-text-only"
                data-bind="click: function() { Cerca(); }" />
        </div>
        <ul id="articoli_dispo" data-bind="foreach: ModelliDispo">
            <li>Art.
                <label data-bind="text: CodArt">
                </label>
                <label data-bind="text: descrizione">
                </label>
                Iva :<label data-bind="text: Iva"></label>
                Costo:
                <label data-bind="text: PrezzoUnitario">
                </label>
                €/<label data-bind="text: DescUnitaMisura"></label>
                <img src='Images/apply.png' data-bind="click: function() { $root.Link($data); }, visible : CanAdd()"
                    style='border-width: 0px; cursor: pointer;' />
            </li>
        </ul>
        <ul id="articoli" data-bind="foreach: Associati">
            <li>
                <label data-bind="text: CodArt">
                </label>
                <label data-bind="text: descrizione">
                </label>
                Iva :<label data-bind="text: Iva"></label>
                Costo:
                <label data-bind="text: PrezzoUnitario">
                </label>
                €/<label data-bind="text: DescUnitaMisura"></label>
                <img src='Images/delete.png' data-bind="click: function() { $root.Remove($data); }"
                    style='border-width: 0px; cursor: pointer;' />
            </li>
        </ul>       
        <div data-bind="visible: Associati().length > 0">
            Nome Modello :
            <input type="text" id="nome" maxlength="50" />
            <input type="button" id="btnSave" value="Salva" class="ui-widget ui-state-default ui-corner-all ui-button-text-only" />
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="TasksPaneHeaderText" runat="Server">
</asp:Content>
<asp:Content ID="Content8" ContentPlaceHolderID="TasksPane" runat="Server">
</asp:Content>
<asp:Content ID="Content9" ContentPlaceHolderID="JSSection" runat="Server">
</asp:Content>
